<app-page title="{{'request_burst' | i18n}}">

  <mat-horizontal-stepper #stepper [linear]="true" labelPosition="bottom">
    <mat-step>
      <ng-template matStepLabel>{{ 'qr_code_data' | i18n }}</ng-template>
      <div class="step-container">

        <form (ngSubmit)="onSubmit($event);" #requestBurstForm="ngForm">
          <mat-form-field>
            <input matInput [(ngModel)]="account.accountRS" name="recipientRS" disabled>
            <label matSuffix class="font-size-14">{{ 'your_address' | i18n }}</label>
          </mat-form-field>

          <mat-form-field>
            <input matInput [(ngModel)]="amountNQT" name="amountNQT" placeholder="{{ 'amount' | i18n }}">
            <label matSuffix>BURST</label>
          </mat-form-field>

          <mat-form-field>
            <input matInput [(ngModel)]="feeNQT" name="feeNQT" placeholder="{{ 'fee' | i18n }}">
            <label matSuffix>BURST</label>
          </mat-form-field>

          <burst-fee-selector [fees]="fees" [(feeNQT)]="feeNQT"></burst-fee-selector>

          <mat-checkbox [(ngModel)]="immutable" name="immutable">{{ "immutable" | i18n }}</mat-checkbox>

        </form>
        <strong>Total:</strong> {{ getTotal() }} BURST
        <br/><br/>

        <button type="submit"
                class="mr-8"
                mat-raised-button
                mat-button color="primary"
                (click)="onSubmit($event)"
                disabled="{{getAmount()===0}}"
        >{{ "generate_qr" | i18n }}</button>
      </div>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>{{ 'qr_code' | i18n }}</ng-template>
      <div class="step-container">
        <app-request-burst-qr
          [imgSrc]="imgSrc"
          [recipientRS]="account.accountRS"
          [amountNQT]="amountNQT || '0'"
          [feeNQT]="feeNQT"
          [immutable]="immutable"
        ></app-request-burst-qr>
      </div>
    </mat-step>
  </mat-horizontal-stepper>

</app-page>
